<script setup lang="ts">
import { OScroller } from '@opensig/opendesign';

const props = withDefaults(defineProps<{
  full?: boolean;
  maxHeight?: number | string;
  visible: boolean;
  title?: string;
  maskClose?: boolean;
}>(), {
  full: true,
  maxHeight: 'auto',
  maskClose: true,
});

const emits = defineEmits(['update:visible']);
const { full, maxHeight = 'auto', maskClose } = props;


const clickMask = () => {
  if (maskClose) {
    emits('update:visible', false);
  }
};

</script>

<template>
  <div :class="{
    'bottom-popover': true,
    'is-full': full,
    'is-visible': visible,
  }" :style="{
    '--max-height': Number.isNaN(maxHeight) ? maxHeight : (maxHeight + 'px'),
  }">
    <div class="bottom-popover-mask" @click="clickMask"></div>
    <div class="bottom-popover-wrapper">
      <div class="bottom-popover-header" v-if="title">{{ title }}</div>
      <OScroller>
        <div class="bottom-popover-body">
          <slot></slot>
        </div>
      </OScroller>

    </div>

  </div>
</template>

<style scoped lang="scss">
.bottom-popover {
  display: none;

  &.is-visible {
    display: block;
  }

  .bottom-popover-mask {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: calc(var(--layout-header-z-index) + 110);
    pointer-events: auto;
  }

  .bottom-popover-header {
    color: var(--o-color-info1);
    font-weight: 500;
    text-align: center;
    font-size: 18px;
    line-height: 22px;
  }

  .bottom-popover-wrapper {
    background-color: var(--o-color-fill2);
    border-radius: 4px;
    position: fixed;
    left: var(--grid--layout-padding);
    right: var(--grid--layout-padding);
    bottom: 24px;
    z-index: calc(var(--layout-header-z-index) + 111);
    pointer-events: auto;
    overflow: auto;
    padding: 16px 0;

    .bottom-popover-body {
      padding: 12px 16px 0;
      max-height: calc(var(--max-height) - 46px);
    }
  }

  &.is-full {
    .bottom-popover-wrapper {
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 4px 4px 0 0;

      .bottom-popover-body {
        padding: 16px 24px 0;
      }
    }
  }
}
</style>